<template>
    <div class="f-header">
        <span class="logo" >
            <el-icon class="mr-1"><eleme-filled /></el-icon>
            zd
            
        </span>
        <el-icon class="icon-btn" @click="pageStore.handleAsideWidth">
            <fold v-if="pageStore.asideWidth == '250px'"/> 
            <Expand v-else/>
        </el-icon>
        <el-tooltip effect="dark" content="刷新" placement="bottom">
            <el-icon class="icon-btn" @click="handleRefresh"><refresh /></el-icon>
        </el-tooltip>

        <div class="ml-auto flex items-center">
            <el-tooltip effect="dark" content="全屏" placement="bottom">
                <el-icon class="icon-btn" @click="toggle">
                    <full-screen v-if="!isFullscreen"/>
                    <aim v-else/>
                </el-icon>
            </el-tooltip>
            
            <el-dropdown class="dropdown" @command="handleCommand" >
                <span class="flex items-center text-light-50" >
                    <!-- :src="userStore.user.avatar" -->
                    <el-avatar class="mr-2" :size="25"  icon="UserFilled" />
                    {{ userStore.user[0].name }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>                             
                </template>
            </el-dropdown>
        </div>
    </div>
<!-- 抽屉 -->
    <!-- <el-drawer v-model="showDrawer" title="修改密码" size="45%" :close-on-click-modal="false">
        <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" size="small">
            <el-form-item prop="oldpassword" label="旧密码">
                <el-input v-model="form.oldpassword" placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="新密码">
                <el-input type="password" v-model="form.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item prop="repassword" label="确认密码">
                <el-input type="password" v-model="form.repassword" placeholder="请输入确认密码" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" >提交</el-button>
            </el-form-item>
        </el-form>
    </el-drawer> -->
    <form-drawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit">
        <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" size="small">
            <el-form-item prop="oldpassword" label="旧密码">
                <el-input v-model="form.oldpassword" placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="新密码">
                <el-input type="password" v-model="form.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item prop="repassword" label="确认密码">
                <el-input type="password" v-model="form.repassword" placeholder="请输入确认密码" show-password></el-input>
            </el-form-item>
        </el-form>
    </form-drawer>
</template>
<script setup>
import { useRepassword,useLogout } from "@/utils/useManager"
import { ref, reactive } from 'vue'
import formDrawer from '@/components/FormDrawer.vue'
import { updatepassword } from "@/api/manager"
import { showModel,toast } from "@/utils/toast.js"
import { useRouter } from "vue-router"
import { useFullscreen } from '@vueuse/core'
import { usePageStore } from '@/stores/page'
import { useUserStore } from '@/stores/user'
const pageStore = usePageStore()
const userStore = useUserStore()
const xx = ()=>{console.log(pageStore.menus)}
const { 
        // 是否全屏状态
        isFullscreen, 
        // 切换全屏
        toggle 
    } = useFullscreen()

const {
    formDrawerRef,
    form,
    rules,
    formRef,
    onSubmit,
    openRePasswordForm
} = useRepassword()

const {
    handleLogout
} = useLogout()

// 刷新
const handleRefresh = ()=>location.reload()

// c 是下拉按钮的选项
const handleCommand = (c)=>{
    switch (c) {
        case "logout":
            handleLogout()
            break;
        case "rePassword":
            openRePasswordForm()
            // showDrawer.value = true
            // console.log(formDrawerRef.value.open());
            break;
    }
}
// const router = useRouter()
// const store = useStore()
// const logout  = () => {
//     showModel("是否要退出登陆？")
//     .then(() => {
//         // 调用全局变量里的方法      
//         store.dispatch('logout')
//         router.push("/login")
//         toast("退出成功")
// })
// }




// const handleLogout  = () => {
//     showModel("是否要退出登陆？")
//     .then(() => {
//         // 调用全局变量里的方法      
//         store.dispatch('logout')
//         router.push("/login")
//         toast("退出成功")
// })
// }

// // 修改密码
// const formDrawerRef = ref(null)
// // const formRef = ref(null)
// const showDrawer = ref(false)
// const form = reactive({
//     oldpassword:"",
//     password: "",
//     repassword:""
// })
// let repeatValidate = (rule, value, callback) => {
//       if (value !== form.password) {
//         callback(new Error('两次输入密码不一致!'))
//       } else {
//         callback()
//       }
//     }

// const rules = {
//     oldpassword: [
//         {
//             required: true,
//             message: '旧密码不能为空',
//             trigger: 'blur'
//         },
//     ],
//     password: [
//         {
//             required: true,
//             message: '新密码不能为空',
//             trigger: 'blur'
//         },
//     ],
//     repassword: [
//         {
//             required: true,
//             message: '确认密码不能为空',
//             trigger: 'blur'
            
//         },
//         { validator: repeatValidate, trigger: 'blur' } // 2密码不一致
//     ]
// }
// const formRef = ref(null)
// const onSubmit = () => {
//     formRef.value.validate((valid) => {
//         if (!valid) {
//             return false
//         }
//         formDrawerRef.value.showLoading()
//         updatepassword(form)
//         .then(res=>{
//             toast("修改密码成功，请重新登录")
//             store.dispatch("logout")
//             // 跳转回登录页
//             router.push("/login")
//         })
//         .finally(()=>{
//             // loading.value = false
//             formDrawerRef.value.hideLoading()
//         })

//     })
// }

</script>
<style>
.f-header{
    @apply flex items-center text-light-50 fixed top-0 left-0 right-0;
    /* bg-indigo-700 */
    height: 64px;
    z-index:1000;
    background-color: #2d3a4b;
}

.logo{
    width: 250px;
    @apply flex justify-center items-center text-xl ; 
}

.icon-btn{
    @apply flex justify-center items-center;
    width: 42px;
    height: 64px;
    cursor: pointer;
}

.icon-btn:hover{
    /* @apply bg-indigo-600; */
    background-color: #43566f;

}

.f-header .dropdown{
    height: 64px;
    cursor: pointer;
    @apply flex justify-center items-center mx-5;
}
</style>